$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    position: relative;
    overflow: hidden;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 84vw;
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(5px);
      padding: 3vw 8vw;
      border-top: 1px solid #FFF;

      .p1 {
        color: #FFF;
        font-size: $fontSize_54;
        font-weight: 700;
        font-family: 'Montserrat-Regular.otf';
        text-transform: capitalize;
      }

      .des {
        color: #FFF;
        font-size: $fontSize_18;
        font-weight: 350;
        width: 45vw;
        margin-top: 1vw;
      }
    }
  }

  .r_fixed {
    position: fixed;
    right: 0;
    bottom: 30%;
    border-radius: 4px;
    background: #1B2170;
    box-shadow: 0px 4px 10px 0px rgba(6, 11, 67, 0.29);
    z-index: 10;
    padding: 0.8vw;
    .icon{
      svg{
        display: block;
        margin: 0 auto;
        width: 30/$f+vw;
      }
    }
    p{
      color:white;
      font-size: $fontSize_16;
      margin-top: 0.5vw;
    }
  }


  .section1 {
    margin: 4vw 8vw;

    .t {
      color: #000;
      font-size: $fontSize_48;
      font-weight: 700;
    }

    .logo {
      margin: 2vw 0;

      img {
        display: block;
        width: 162/$f+vw;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4%;
      margin-top: -3vw;

      .l {
        width: 50%;

        .t2 {
          color: #000;
          font-size: $fontSize_32;
          font-weight: 700;
        }

        .des {
          color: #333;
          font-size: $fontSize_16;
          line-height: 1.5;

          p {
            margin-top: 0.8vw;
          }
        }
      }

      .r {
        width: 50%;
        overflow: hidden;

        img {
          width: 100%;
          display: block;
          object-fit: cover;
          transition: all 600ms;
        }

        &:hover {
          img {
            transform: scale(1.05);
          }
        }
      }
    }
  }

  .section2 {
    background: linear-gradient(180deg, rgba(250, 251, 255, 0.00) 0%, #FAFBFF 100%);
    padding: 4vw 8vw 6vw 8vw;

    .box1 {
      .t {
        text-align: center;
        color: #000;
        font-size: $fontSize_48;
        font-weight: 700;
      }

      .t2 {
        color: #333;
        font-size: $fontSize_16;
        text-align: center;
        margin-top: 1.5vw;
      }

      .allItems {
        display: flex;

        a {
          display: block;
          width: 23.5%;
          margin-left: 1.2%;
          margin-top: 2vw;

          .pic {
            overflow: hidden;

            img {
              width: 100%;
              display: block;
              object-fit: cover;
              transition: all 600ms;
            }
          }

          .text {
            border: 1px solid #DCDDEC;
            background: white;
            padding: 1vw;

            .p1 {
              color: #000;
              font-size: $fontSize_22;
              font-family: 'SourceHanSansCN-Medium';
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              transition: all 600ms;
            }

            .des {
              color: #666;
              font-size: $fontSize_16;
              margin-top: 0.5vw;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
          }

          &:hover {
            .pic {
              img {
                transform: scale(1.05);
              }
            }

            .text {
              .p1 {
                color: #1B2170;
              }
            }
          }
        }
      }
    }

    .box2 {
      margin-top: 3vw;

      .t {
        text-align: center;
        color: #000;
        font-size: $fontSize_48;
        font-weight: 700;
      }
      .partners{
        .icons{
          display: flex;
          .icon{
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 11.4%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 1%;
            margin-top: 1.5vw;
            padding: 0.6vw 0;
            img{
              max-width: 80%;
              object-fit: contain;
              display: block;
            }
          }
        }
      }
    }
  }

  .section3 {
    margin: 6vw 10vw;

    .t {
      text-align: center;
      color: #000;
      font-size: $fontSize_48;
      font-weight: 700;
    }

    .allItems {
      display: flex;
      justify-content: space-between;
      margin-top: 2vw;

      .item {
        width: 32%;

        .pic {
          overflow: hidden;

          img {
            width: 100%;
            display: block;
            object-fit: cover;
            transition: all 600ms;
          }
        }

        .des {
          margin: 1vw 0;
          color: #000;
          font-size: $fontSize_22;
        }

        &:hover {
          .pic {
            img {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }

  .section4 {
    background: #000;
    padding: 8vw 12vw 10vw 12vw;
    position: relative;
    overflow: hidden;

    .circle1 {
      position: absolute;
      left: 0;
      top: 0;

      img {
        width: 488/$f+vw;
        display: block;
      }
    }

    .circle2 {
      position: absolute;
      right: 0;
      bottom: -5vw;

      img {
        width: 500/$f+vw;
        display: block;
      }
    }

    .t {
      text-align: center;
      color: #FFF;
      font-size: $fontSize_48;
      font-weight: 700;
    }

    .types {
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid rgba(255, 255, 255, .5);
      padding: 0 5%;
      margin: 2vw 0;

      .item {
        color: rgba(255, 255, 255, .6);
        font-size: $fontSize_16;
        position: relative;
        transition: all 600ms;
        padding: 1vw 0;
        cursor: pointer;

        &::after {
          content: '';
          display: block;
          width: 0;
          height: 3px;
          background: #2C368D;
          position: absolute;
          left: 0;
          bottom: -1px;
          transition: all 600ms;
        }

        // &:hover {
        //   color: #B4DBFF;

        //   &::after {
        //     width: 100%;
        //   }
        // }
      }

      .active {
        color: #B4DBFF;

        &::after {
          width: 100%;
        }
      }
    }

    .content {
      width: 100%;

      .swiper-container {
        width: 100%;

        .info {
          display: flex;
          justify-content: space-between;

          .l {
            width: 50%;
            overflow: hidden;

            img {
              width: 100%;
              display: block;
              object-fit: cover;
              height: 100%;
              transition: all 600ms;
            }
          }

          .r {
            width: 40%;
            padding: 0 5%;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .p1 {
              color: #000;
              font-size: $fontSize_32;
              font-family: 'SourceHanSansCN-Medium';
            }

            .des {
              color: #666;
              font-size: $fontSize_18;
              margin-top: 1.5vw;
            }
          }

          &:hover {
            .l {
              img {
                transform: scale(1.05);
              }
            }
          }
        }
      }
    }
  }

  .section5 {
    background: #FAFBFF;
    padding: 4vw 12vw;

    .t {
      color: #000;
      font-size: $fontSize_48;
      font-family: 'SourceHanSansCN-Medium';
    }

    .allItems {
      display: flex;
      width: 104%;
      margin-left: -2%;
      margin-top: 1.5vw;

      .item {
        border-radius: 9px;
        background: #FFF;
        box-shadow: 0px 0px 10px 0px rgba(11, 18, 75, 0.15);
        width: calc(22.5% - 2vw);
        margin-left: 2%;
        padding: 1vw;
        margin-bottom: 1vw;

        .p1 {
          color: #000;
          font-size: $fontSize_22;
          font-family: 'SourceHanSansCN-Medium';
          transition: all 600ms;
        }

        a {
          display: flex;
          align-items: center;
          color: #2C368D;
          font-size: $fontSize_16;
          margin-top: 1vw;

          svg {
            display: block;
            margin-left: 0.5vw;
          }
        }

        &:hover {
          .p1 {
            color: #1B2170;
          }
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .r_fixed{
      padding: 10px;
      display: none;
      .icon{
        svg{
          width: 25px;
        }
      }
      p{
        font-size: 14px;
      }
    }
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .text{
        width: 90%;
        padding: 15px 5%;
        .p1{
          font-size: 18px;
        }
        .des{
          width: 100%;
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
    .section1{
      margin: 30px 5%;
      .t{
        font-size: 22px;
      }
      .logo{
        img{
          width: 80px;
        }
      }
      .content{
        flex-direction: column;
        margin: 20px 0;
        .l{
          width: 100%;
          .t2{
            font-size: 18px;
          }
          .des{
            font-size: 16px;
          }
        }
        .r{
          width: 100%;
          margin-top: 15px;
        }
      }
    }
    .section2{
      padding: 30px 5% 60px 5%;
      .box1{
        .t{
          font-size: 20px;
        }
        .t2{
          font-size: 14px;
        }
        .allItems{
          flex-direction: column;
          a{
            width: 100%;
            margin-left: 0;
            margin-top: 20px;
            .text{
              padding: 15px;
              .p1{
                font-size: 18px;
              }
              .des{
                font-size: 16px;
                margin-top: 10px;
              }
            }
          }
        }
      }
      .box2{
        margin-top: 30px;
        .t{
          font-size: 20px;
        }
        .partners{
          .icons{
            flex-wrap: wrap;
            justify-content: space-between;
            .icon{
              width: 48%;
              margin-left: 0;
              padding: 15px 0;
              margin-top: 15px;
            }
          }
        }
      }
    }
    .section3{
      margin: 30px 5%;
      .t{
        font-size: 20px;
      }
      .allItems{
        margin-top: 20px;
        flex-direction: column;
        .item{
          width: 100%;
          margin-bottom: 20px;
          .des{
            font-size: 18px;
            margin: 10px 0;
          }
        }
      }
    }
    .section4{
      padding: 30px 5%;
      .t{
        font-size: 20px;
      }
      .types{
        padding: 0;
        margin: 20px 0;
        flex-wrap: wrap;
        .item{
          font-size: 14px;
          width: 100%;
          text-align: center;
          padding: 10px 0;
        }
      }
      .content{
        .swiper-container{
          .info{
            flex-direction: column;
            .l{
              width: 100%;
            }
            .r{
              width: 90%;
              padding:20px 5%;
              .p1{
                font-size: 18px;
              }
              .des{
                font-size: 16px;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
    .section5{
      padding: 30px 5%;
      .t{
        font-size: 20px;
      }
      .allItems{
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
        .item{
          width: 90%;
          padding: 20px 5%;
          margin-left: 0;
          margin-top: 20px;
          .p1{
            font-size: 18px;
          }
          a{
            p{
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}